<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .searchCon {
            width: 500px;
            height: 40px;
            display: block;
            margin: 50px auto;
            outline: none;
        }
    </style>
</head>

<body>
    <input class="searchCon" type="text">
</body>
<script>
    // 函数防抖

    var searchCon = document.getElementsByClassName("searchCon")[0];

    // 每次输入内容 -> 对后台数据进行检索 -> 返回检索的结果   
    // 直接使用oninput 不做处理  -> 短时间内向服务器(后端)发送很多次请求 -> 耗资源，性能
    // searchCon.oninput = function (e) {
    //     var key = searchCon.value.trim();
    //     console.log("开始搜索", key);
    //     console.log("this", this);
    //     console.log("事件对象", e);
    // }


    searchCon.oninput = debounce(function (e) {
        var key = searchCon.value.trim();
        console.log("开始搜索", key);
        console.log("this", this);
        console.log("事件对象", e);
    }, 300);



    // 如何优化?  
    // 防抖处理 -> 如果短时间重复触发 -> 只执行最后一次

    // var timer = null;
    // searchCon.oninput = function (e) {
    //     // 如果300ms连续触发 -> 先清除上一次 -> 在启动新的
    //     clearInterval(timer);
    //     timer = setTimeout(() => {
    //         var key = searchCon.value.trim();
    //         console.log("开始搜索", key);
    //         console.log("this", this);
    //         console.log("事件对象", e);
    //     }, 300);
    // }


















    // 对防抖操作进行单独的封装  => 后面可以重复使用
    function debounce(callback, delay = 0) {
        var timer = null;
        return function (...list) {  // Rest参数 => 将新函数接收的参数整合到数组中
            clearTimeout(timer);
            timer = setTimeout(() => {
                // callback();
                // callback.apply(this); // callback中的this 依赖于 外层函数的this
                callback.apply(this, list); // callback中的this 依赖于 外层函数的this,callback的参数依赖于 外层函数的参数
            }, delay);
        }
    }

    var newFn = debounce(function (e) {
        var key = searchCon.value.trim();
        console.log("开始搜索", key);
        console.log("this", this);
        console.log("事件对象", e);
    }, 300);

    searchCon.oninput = newFn;

    // 每次输入内容 触发newFn  -> newFn做了防抖处理-> 先清除上一次 在启动下一次   -> 只执行最后一次
    // 最后一次执行时  调用回调函数  -> 执行既定的内容


</script>

</html>